<template>
    <div class="CompanyNotices-box">
        <h5>公司通告</h5>
        <div class="box-content">
            <div class="list-box">
                <div class="content-list" v-for="(item, index) in listData" :key="index"
                    @click="companyNoticesFlag(item, index)">
                    <p class="type" :class="item.type">{{ item.type }}</p>
                    <p class="content">{{ item.content }}</p>
                    <p class="date">{{ item.date }}</p>
                </div>
            </div>
            <div class="linkSee-box">
                <p class="linkSee" @click="$router.push('/setting/noticesSetting')">查看更多 <i class="iconfont icon-youjiantou1"></i>
                </p>
            </div>
        </div>
        <defineCom v-if="flag" @closePop="closePop" />
        <defineCom1 v-if="flag1" @closePop="closePop" />
        <defineCom2 v-if="flag2" @closePop="closePop" />
    </div>
</template>
<script setup>
import { ref } from 'vue'
import defineCom from './components/defineCom'
import defineCom1 from './components/defineCom1'
import defineCom2 from './components/defineCom2'
let flag = ref(false)
let flag1 = ref(false)
let flag2 = ref(false)
let listData = ref([

    {
        type: '活动',
        content: '河南金圣龙文化传媒集团召开2024年一季度预实分析暨二季度工作部署会',
        date: '04-04'
    },
    {
        type: '消息',
        content: '公司简讯|热烈欢迎朱忠良将军一行莅临金圣龙指导工作',
        date: '04-23'
    },
   
    {
        type: '通知',
        content: '河南金圣龙代表队参加2023南阳市市民健身首届乒乓球双打业余联赛',
        date: '04-10'
    },
    {
        type: '消息',
        content: '公司简讯|河南金圣龙集团召开2023年奋战60天总结大会',
        date: '04-36'
    },
    {
        type: '预警',
        content: '河南金圣龙召开2023年中总结表彰大会暨下半年战略部署大会',
        date: '04-36'
    },
    {
        type: '预警',
        content: '河南金圣龙召开2023年股权激励落地项目启动会',
        date: '04-36'
    },
    {
        type: '预警',
        content: '河南金圣龙召开2023年股权激励落地项目启动会',
        date: '04-36'
    },
    {
        type: '预警',
        content: '同宗同源·传承相依--朱氏宗亲邓州分会成立大会圆满举行，祝贺朱建房当选首届会长!',
        date: '04-36'
    },
    {
        type: '预警',
        content: '河南金圣龙董事长朱建房应邀到南阳理工教师教育学院作校友励志报告',
        date: '04-36'
    },
    {
        type: '预警',
        content: '南阳理工学院教师教育学院校友联谊会“南工校友回母校过年座谈会”活动在河南金圣龙举行',
        date: '04-36'
    },
])
// 点击进入
const companyNoticesFlag = (v, i) => {
    switch (i) {
        case 0:
            flag.value = true
            break;
        case 1:
            flag1.value = true
            break;
        case 2:
            flag2.value = true
            break;

        default:
            break;
    }
}
const closePop = () => {
    flag.value = false
    flag1.value = false
    flag2.value = false
}
</script>
<style scoped lang='scss'>
// 滚动论
*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

*:hover::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 53%, 0.4);
}

*:hover::-webkit-scrollbar-track {
    background: transparent;
}

.CompanyNotices-box {
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;

    h5 {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 40px 0;

        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: -9px;
            top: 0px;
        }
    }

    .box-content {
        width: 100%;
        height: 330px;
        background: #FFFFFF;
        box-shadow: 2px 0px 14px 3px rgba(0, 0, 0, 0.16);
        border-radius: 4px 4px 4px 4px;

        .list-box {
            overflow-y: scroll;
            width: 100%;
            height: 290px;
            padding: 0 20px;


            .content-list {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
            }

            .type {
                border-radius: 2px;
                width: 60px;
                height: 30px;
                text-align: center;
                line-height: 30px;
            }

            .活动 {
                background: #FCE1C9;
                color: #FF8C23;
            }

            .消息 {
                background: #CDF7F9;
                color: #04B9BF;
            }

            .通知 {
                background: #D8DFFB;
                color: #04B9BF;
            }

            .预警 {
                background: #FF9C9C;
                color: #FB3535;
            }

            .content {
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;

                width: 179px;
                height: 20px;
                color: #333333;
            }

            .date {
                font-size: 14px
            }
        }

        .linkSee-box {
            width: 100%;
            text-align: right;
            line-height: 40px;
            height: 40px;
            color: #666;
            font-size: 14px;
            border-top: 1px solid #d4d4d4;
        }
    }
}
</style>
